<template>
	<svg aria-hidden="true" :class="cSvgClassName" :style="cStyle">
		<use :xlink:href="cIconName" :fill="props.color" />
	</svg>
</template>

<script setup lang="ts" name="GlobalSvgIcon">
import { computed } from 'vue';

interface TsProps {
	// 文件名(来源于src/assets/svgs文件夹下对应的文件名)
	iconName: string;
	width?: string;
	height?: string;
	// 额外的class样式类名
	className?: string;
	color?: string;
	opacity?: number;
	scale?: number;
	shape?: 'circle' | 'square';
}

const props = withDefaults(defineProps<TsProps>(), {
	iconName: '',
	width: '1em',
	height: '1em',
	color: '',
	className: '',
	opacity: 1,
	scale: 1,
	shape: 'square'
});

const cIconName = computed(() => `#icon-${props.iconName}`);

const cSvgClassName = computed(() => {
	if (props.className) {
		return 'global-svg-icon ' + props.className;
	}
	return 'global-svg-icon';
});

const cStyle = computed(() => {
	return {
		width: props.width,
		height: props.height,
		color: props.color,
		opacity: `${props.opacity}`,
		transform: `scale(${props.scale})`,
		borderRadius: props.shape === 'circle' ? '50%' : '0'
	};
});
</script>

<style lang="less">
.global-svg-icon {
	overflow: hidden;
	vertical-align: -0.125em;
	fill: currentcolor;

	&:focus {
		outline: none;
	}
}
</style>
